<template>
  <div
    class="top"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
  >
    <div class="topindexmeny">
      <IndexMenu />
    </div>
    <div class="centers">
      <div class="projecttops">
        <div class="projecttop1">
          <div class="unfinished">
            <span>未完成</span
            ><span class="size">{{ objectnum.objutladd }}</span>
          </div>
          <div class="unfinisheds">
            <div>
              <span>创作中</span><span>{{ objectnum.editing }}</span>
            </div>
            <div>
              <span>合成中</span><span>{{ objectnum.running }}</span>
            </div>
            <div>
              <span>排队中</span><span>{{ objectnum.queuing }}</span>
            </div>
            <div>
              <span class="defeated">创作失败</span
              ><span>{{ objectnum.failed }}</span>
            </div>
          </div>
        </div>
        <div class="projecttop2">
          <div class="unfinished">
            <span>已完成</span
            ><span class="size">{{ objectnum.completed }}</span>
          </div>
        </div>
      </div>
      <div class="inquire">
        <div class="inquire1">
          <div class="inquire11">
            <div
              :class="projectstyle"
              @click="tablechackproject('muprojectlist', 'chackmuprojectlist')"
            >
              我的成片
            </div>
            <div
              :class="projectstyles"
              @click="tableproject('muprojectlist', 'chackmuprojectlist')"
            >
              我的草稿
            </div>
            <div style="color: #bcc1c9">|</div>
          </div>
          <div class="inquire1input2" v-show="isdraft">
            状态：
            <div class="inquire1input1input">
              <el-select
                v-model="draft"
                @change="statuschange"
                placeholder="请选择"
                size="mini"
              >
                <el-option label="全部草稿" :value="'1,2,3,5,6,7'"> </el-option>
                <el-option label="创作中" :value="'1'"> </el-option>
                <el-option label="排队中" :value="'7'"> </el-option>
                <el-option label="合成嘴型中" :value="'2'"> </el-option>
                <el-option label="合成视频中" :value="'3'"> </el-option>
                <el-option label="合成失败" :value="'5,6'"> </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="inquire2">
          <div class="inquire2input1">
            <el-input
              size="mini"
              v-model="projectvalue"
              placeholder="请输入作品名称"
            ></el-input>
          </div>
          <div class="inquire2input2">
            <el-button
              @click="projectname"
              icon="el-icon-search"
              size="mini"
              type="primary"
              >搜 索</el-button
            >
          </div>
        </div>
      </div>
      <div class="centerbox">
        <div class="centerboxtow">
          <div class="centerboxnoe" @click="dialogFormVisible = true">
            <div class="centerzhonjian">
              <div class="reads">+</div>
              <span class="readtext"> 创建项目 </span>
            </div>
          </div>
          <div v-for="item in project1" :key="item.uuidStr" class="project">
            <div v-if="item.status === 4">
              <div class="projectvideo">
                <video
                  :src="url + item.path"
                  width="100%"
                  height="100%"
                  loop
                  controls
                ></video>
              </div>
              <div class="diandiandian">
                <el-dropdown
                  class="diandiandians"
                  @command="handleCommand(item, $event)"
                >
                  <span class="el-dropdown-link">
                    <i slot="reference" class="el-icon-more"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="compile"
                      ><span class="downloadvideo">编辑</span></el-dropdown-item
                    >
                    <el-dropdown-item command="download"
                      ><span class="downloadvideo">下载</span></el-dropdown-item
                    >
                    <el-dropdown-item divided command="del"
                      ><span class="deltext">删除</span></el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>

                <span class="projectname">{{ item.name }}</span
                ><br />
                <span class="times"
                  >创建时间：{{
                    new Date(item.createdAt).toLocaleDateString()
                  }}</span
                >
              </div>
            </div>
            <div v-if="item.status === 3">
              <div
                class="projectedit"
                v-loading="true"
                :element-loading-text="`项目视频合成中${
                  Math.ceil(
                    ((+new Date() - +new Date(item.updatedAt)) /
                      (item.finishTime * 1000 - +new Date(item.updatedAt))) *
                      100
                  ) >= 99
                    ? 99
                    : Math.ceil(
                        ((+new Date() - +new Date(item.updatedAt)) /
                          (item.finishTime * 1000 -
                            +new Date(item.updatedAt))) *
                          100
                      )
                }%`"
              >
                <div class="projecteditbox1">合成中</div>
              </div>
              <div class="diandiandian">
                <div class="objtext">
                  <span class="projectname">{{ item.name }}</span
                  ><br />
                  <span class="times"
                    >创建时间：{{
                      new Date(item.createdAt).toLocaleDateString()
                    }}</span
                  >
                </div>
                <div @click="handleCommand(item, 'del')" class="deldels">
                  <el-button
                    icon="el-icon-delete"
                    circle
                    size="small"
                    type="danger"
                  ></el-button>
                </div>
              </div>
            </div>
            <div v-if="item.status === 2">
              <div
                class="projectedit"
                v-loading="true"
                :element-loading-text="`人物嘴型视频合成中`"
              >
                <div class="projecteditbox1">合成中</div>
              </div>
              <div class="diandiandian">
                <div class="objtext">
                  <span class="projectname">{{ item.name }}</span
                  ><br />
                  <span class="times"
                    >创建时间：{{
                      new Date(item.createdAt).toLocaleDateString()
                    }}</span
                  >
                </div>
                <div @click="handleCommand(item, 'del')" class="deldels">
                  <el-button
                    icon="el-icon-delete"
                    circle
                    size="small"
                    type="danger"
                  ></el-button>
                </div>
              </div>
            </div>
            <div v-if="item.status === 1">
              <div class="projectedit">
                <div class="projecteditbox1">编辑中</div>
                <el-button
                  @click="EditingVirtual(item)"
                  type="primary"
                  class="projecteditbox2"
                >
                  前去编辑
                </el-button>
              </div>
              <div class="diandiandian">
                <div class="objtext">
                  <span class="projectname">{{ item.name }}</span
                  ><br />
                  <span class="times"
                    >创建时间：{{
                      new Date(item.createdAt).toLocaleDateString()
                    }}</span
                  >
                </div>
                <div @click="handleCommand(item, 'del')" class="deldels">
                  <el-button
                    icon="el-icon-delete"
                    circle
                    size="small"
                    type="danger"
                  ></el-button>
                </div>
              </div>
            </div>
            <div v-if="item.status === 5">
              <div class="projectedit">
                <div class="projecteditbox1" style="color: red">合成失败</div>
                <el-button
                  @click="Retryitem(item.id, item.status)"
                  type="danger"
                  class="projecteditbox2"
                >
                  重新合成
                </el-button>
              </div>
              <div class="diandiandian">
                <div class="objtext">
                  <span class="projectname">{{ item.name }}</span
                  ><br />
                  <span class="times"
                    >创建时间：{{
                      new Date(item.createdAt).toLocaleDateString()
                    }}</span
                  >
                </div>
                <div @click="handleCommand(item, 'del')" class="deldels">
                  <el-button
                    icon="el-icon-delete"
                    circle
                    size="small"
                    type="danger"
                  ></el-button>
                </div>
              </div>
            </div>
            <div v-if="item.status === 6">
              <div class="projectedit">
                <div class="projecteditbox1" style="color: red">合成失败</div>
                <el-button
                  @click="Retryitem(item.id, item.status)"
                  type="danger"
                  class="projecteditbox2"
                >
                  重新合成
                </el-button>
              </div>
              <div class="diandiandian">
                <div class="objtext">
                  <span class="projectname">{{ item.name }}</span
                  ><br />
                  <span class="times"
                    >创建时间：{{
                      new Date(item.createdAt).toLocaleDateString()
                    }}</span
                  >
                </div>
                <div @click="handleCommand(item, 'del')" class="deldels">
                  <el-button
                    icon="el-icon-delete"
                    circle
                    size="small"
                    type="danger"
                  ></el-button>
                </div>
              </div>
            </div>
            <div v-if="item.status === 7">
              <div
                class="projectedit"
                v-loading="true"
                :element-loading-text="`排队中`"
              >
                <div class="projecteditbox1">排队中</div>
              </div>
              <div class="diandiandian">
                <div class="objtext">
                  <span class="projectname">{{ item.name }}</span
                  ><br />
                  <span class="times"
                    >创建时间：{{
                      new Date(item.createdAt).toLocaleDateString()
                    }}</span
                  >
                </div>
                <div @click="handleCommand(item, 'del')" class="deldels">
                  <el-button
                    icon="el-icon-delete"
                    circle
                    size="small"
                    type="danger"
                  ></el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <pagination
          :total="total"
          :currentPage4="currentPage4"
          :pagesize="pagesize"
          @pagination="pagination"
        />
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogFormVisible"
      width="35%"
      :close-on-click-modal="false"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    >
      <span slot="title">
        <h3>项目信息</h3>
        <br />
        <h5>新建一个项目，请编辑项目名和项目描述</h5>
      </span>
      <div class="dialogform">
        <el-form :model="form" ref="ruleForm" :rules="rules">
          <el-form-item
            label="项目名称:"
            :label-width="formLabelWidth"
            prop="name"
          >
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="项目描述:"
            :label-width="formLabelWidth"
            prop="description"
            @keyup.enter.native="projectAdds('ruleForm')"
          >
            <el-input
              type="textarea"
              resize="none"
              :rows="8"
              v-model="form.description"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer bottoms">
        <el-button round @click="dialogFormVisible = false">取 消</el-button>
        <el-button round type="primary" @click="projectAdds('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>


<script>
import pagination from "@/components/pagination.vue";
import { mp4xiaz } from "@/utils/xiaz";
import {
  userProlist,
  userProAdd,
  userProdelete,
  getComposeCharacterMouth,
  compose,
  composeStatus,
  composeCharacterMouth,
  userProupdate,
} from "@/api/virtualhuman";
import { listnumbers } from "@/api/demo";
import IndexMenu from "@/components/menu/IndexMenu.vue";
export default {
  name: "HomeView",
  data() {
    return {
      projectstyles: "muprojectlist",
      projectstyle: "chackmuprojectlist",
      total: 0,
      currentPage4: 1,
      pagesize: 9,
      status: 4,
      projectvalue: "",
      loading: false,
      url: this.$store.getters["url/urls"],
      dialogFormVisible: false, //添加项目于弹出层
      formLabelWidth: "120px",
      form: {
        name: "",
        description: "",
      },
      project1: [],
      project2: [],
      project3: [],
      rules: {
        name: [
          { required: true, message: "请输入项目名称", trigger: "change" },
        ],
        description: [
          { required: true, message: "请输入项目备注", trigger: "change" },
        ],
      },
      time: "",
      isdraft: false,
      draft: "4",
      objectnum: {
        completed: 0, //已完成
        editing: 0, //创作中
        failed: 0, //失败
        queuing: 0, //排队
        objutladd: 0, //编辑中总数
      },
    };
  },
  mounted() {
    this.chackuserProlists();
    this.time = setInterval(() => {
      this.chackuserProlists();
    }, 30000);
  },
  beforeDestroy() {
    //摧毁定时器
    clearInterval(this.time);
  },
  methods: {
    tablechackproject(val, lav) {
      this.currentPage4 = 1;
      this.projectstyle = lav;
      this.projectstyles = val;
      this.isdraft = false;
      this.status = 4;
      this.draft = "4";
      this.projectvalue = "";
      this.chackuserProlists();
    },
    tableproject(val, lav) {
      this.currentPage4 = 1;
      this.projectstyle = val;
      this.projectstyles = lav;
      this.isdraft = true;
      this.draft = "1,2,3,5,6,7";
      this.status = 0;
      this.projectvalue = "";
      this.chackuserProlists();
    },
    chackuserProlists() {
      this.userProlists(
        this.currentPage4,
        this.pagesize,
        this.status,
        this.draft,
        this.projectvalue
      );
      listnumbers({ type: 2 }).then((res) => {
        if (res.code === 200) {
          res.data.objutladd =
            res.data.editing +
            res.data.queuing +
            res.data.failed +
            res.data.running;
          this.objectnum = res.data;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    pagination(val) {
      this.currentPage4 = val;
      this.chackuserProlists();
    },
    userProlists(currentPage4, pagesize, status, draft, name) {
      draft = draft.split(",");
      var arr = [];
      draft.forEach((item) => {
        arr.push(Number(item));
      });
      //获取列表
      var obj = {
        pageIndex: currentPage4,
        pageSize: pagesize,
        status,
        type: 2,
        draft: arr,
        name,
      };
      userProlist(obj).then((res) => {
        if (res.code === 200) {
          var arr1 = []; // 合成中和编辑中
          var arr2 = []; //成功
          var arr3 = []; //失败
          res.data.list.forEach((element) => {
            if (element.status === 4) {
              arr2.push(element);
            } else if (
              element.status === 1 ||
              element.status === 2 ||
              element.status === 3 ||
              element.status === 5 ||
              element.status === 6 ||
              element.status === 7
            ) {
              arr1.push(element);
            } else {
              arr3.push(element);
            }
          });
          this.project1 = res.data.list;
          this.total = res.data.count;
          // this.project2 = arr2
          // this.project3 = arr3;
          this.listnxun2(arr1);
          this.listnxun3(arr1);
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    listnxun2(list) {
      //轮询人物嘴型
      list.forEach((element) => {
        if (element.status === 2) {
          getComposeCharacterMouth({ projectId: element.uuidStr - 0 }).then(
            (res) => {
              if (res.code !== 200) {
                // setTimeout(() => {
                //   // this.listnxun2(list);
                // }, 30000);
              } else {
                this.listnxun2s(element.uuidStr - 0, res.data);
              }
            }
          );
        }
      });
    },
    listnxun2s(id, url) {
      console.log("嘴型合成完成");
      // compose({ projectId: id })
      //   .then(() => {
      //
      //   })
      //   .catch((err) => {
      //     this.$message({
      //       message: err.msg,
      //       type: "error",
      //     });
      //   });
    },
    listnxun3(list) {
      list.forEach((element) => {
        if (element.status === 3) {
          composeStatus({ projectId: element.uuidStr - 0 }).then((res) => {
            if (res.code !== 200) {
            } else {
              if (res.data.path === "") {
              } else {
              }
            }
          });
        }
      });
    },
    projectAdds(formName) {
      //添加项目
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          var obj = {
            type: 2,
            proKind: 1,
            userProjectInfo: {
              userid: this.$store.getters["user"].user.user_id, //用户id
              distinguishability: 1, //1是16：9，2是9：16
              uuid: 0,
              text: "", //总文字
              name: this.form.name, //项目名字
              bgMusic: "", // 背景音乐
              path: "", //目标生成地址
              level: 1, //视频质量 自动 - 1  流畅 -2  清晰 -3  高清 -4
              subtitle: 2, //是否开启字幕 1是 2否
              character: {
                uuid: 10096, //人物id已确认
                video: "static/uploadfile/virtual/people/52843818879.mp4", //人物视频
                staticImg: "static/uploadfile/virtual/people/52843818879.png", // 人物图片已确认
                name: "小美—站", //人物名字已确认
                type: 2, //人物type已确认
                voiceName: "", // 音色已经确认
                tonename: "", // 音色已经确认
                voiceId: 0, //语音id
                width: 225, //人物宽度已确认
                height: 300, //人物高度已确认
                X: 259, //人物坐标已经确认
                Y: 141, //人物top坐标确认
                lipsVideo: "", // 人物合成嘴型的视频2变3用
              },
              ppt: {
                //ppt
                uuid: 0, //pptId
                maxNum: 1, // ppt多少页已确认
                name: "", // ppt名字已确认
                tts: "", //音频
                istts: 2, //是否为全局录音 1是 ， 2否
                pages: [
                  {
                    duration: 1000, //没意义
                    icon: "", //没意义
                    img: "", //图片已确认
                    switchType: "", //没意义
                    text: "", //当页的文字
                    textdome: "",
                    dome: [],
                    tts: "", //音频
                    enlargeStartTime: 0, // 放大开始时间（暂时不做）
                    enlargeEndTime: 0, //放大结束时间（暂时不做）
                    video: "", //视频
                    isSound: 1, //是否开启声音1是2否
                    isVideo: 2, // 是否有视频1是2否
                    index: 0, // 下标
                    pageMouthVideo: "", //当页人嘴视频
                    childList: [], //全屏切割
                    textureList: [], //贴图列表
                  },
                ],
              },
              scene: {
                icon: "static/uploadfile/virtual/scene/193789497455153152.jpg", //背景图已确认
                name: "演播大厅-10000", //背景图名字已确认
                backWidth: 960, //背景图片的宽已确认
                backHeight: 540, //背景图片的高已确认
                type: 1, // 背景图类型已确认
                pptWidth: 294, //电视的高已确认
                pptHeight: 168, //电视的高已确认
                pptX: 586, //电视的位置已确认
                pptY: 162, //电视的位置已确认
              },
            },
            ...this.form,
            original: 1,
          };
          userProAdd(obj)
            .then((res) => {
              if (res.code === 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.dialogFormVisible = false;
                this.form.name = "";
                this.form.description = "";
                this.loading = false;
                this.$router.push({
                  path: "/video",
                  query: {
                    videoid: res.data,
                  },
                });
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
                this.loading = false;
              }
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    projectname() {
      this.chackuserProlists();
    },
    handleCommand(val, $event) {
      //删除项目
      if ($event === "del") {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let obj = {
              projectId: val.uuidStr - 0,
              source: 1,
            };
            userProdelete(obj).then((res) => {
              if (res.code === 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.userProlists(
                  this.currentPage4,
                  this.pagesize,
                  this.status,
                  this.draft,
                  this.projectvalue
                ); //再渲染一遍对应列表
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else if ($event === "download") {
        mp4xiaz(val.path, val.name);
      } else if ($event === "compile") {
        userProupdate({
          projectId: val.id,
          status: 1,
          original: 2,
          userProjectInfo: "",
        }).then((res) => {
          this.$router.push({
            path: "/video",
            query: {
              videoid: val.id - 0,
            },
          });
        });
      }
    },
    EditingVirtual(item) {
      //编辑项目
      if (item.proKind === 1) {
        this.$router.push({
          path: "/video",
          query: {
            videoid: item.uuidStr,
          },
        });
        //让菜单出现工作台
        this.$store.commit("routerpush/ROUTERALTER", item.uuidStr);
      } else if (item.proKind === 2) {
        this.$router.push({
          path: "/prowav",
          query: {
            videoid: item.uuidStr,
          },
        });
      } else if (item.proKind === 3) {
        this.$router.push({
          path: "/protext",
          query: {
            videoid: item.uuidStr,
          },
        });
      }
    },
    Retryitem(id, status) {
      if (status === 5) {
        composeCharacterMouth({ projectId: id }).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.userProlists(
              this.currentPage4,
              this.pagesize,
              this.status,
              this.draft,
              this.projectvalue
            );
          } else {
            this.$message.error(res.msg);
          }
        });
      } else if (status === 6) {
        compose({ projectId: id }).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.userProlists(
              this.currentPage4,
              this.pagesize,
              this.status,
              this.draft,
              this.projectvalue
            );
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    statuschange(value) {
      this.chackuserProlists();
    },
  },
  components: { IndexMenu, pagination },
};
</script>

<style lang="scss" scoped>
.inquire {
  width: 100%;
  height: 70px;
  background-color: #fff;
  display: flex;
  padding: 10px 100px 10px 20px;
  box-sizing: border-box;
  justify-content: space-between;
  margin-bottom: 10px;
  // margin: 0 40px;
  .inquire1 {
    margin-top: 5px;
    display: flex;
    width: 450px;
    height: 40px;
    line-height: 40px;
    justify-content: space-between;
    .inquire11 {
      display: flex;
      width: 250px;
      height: 40px;
      line-height: 40px;
      justify-content: space-between;
    }
    .inquire1input2 {
      display: flex;
      .inquire1input1input {
        width: 100px;
      }
    }
    .chackmuprojectlist {
      padding: 0 10px;
      background-color: #434af9;
      color: #fff;
      border-radius: 7px;
      font-weight: 500;
      &:hover {
        cursor: pointer;
      }
    }
    .muprojectlist {
      padding: 0 10px;
      border-radius: 7px;
      font-weight: 500;
      &:hover {
        cursor: pointer;
      }
    }
  }
  .inquire2 {
    display: flex;
    height: 60px;
    line-height: 60px;
    justify-content: space-between;
    .inquire2input1 {
      padding-right: 10px;
    }
  }
}
.projecttops {
  display: flex;
  width: 100%;
  margin: 20px 0;
  .projecttop1,
  .projecttop2 {
    border-radius: 10px;
    justify-content: space-between;
    display: flex;
    width: 400px;
    height: 90px;
    margin-right: 22px;
    box-sizing: border-box;
    padding: 10px 20px;
    color: #fff;
    .unfinished {
      display: flex;
      flex-direction: column;
      .size {
        font-size: 38px;
      }
    }
    .unfinisheds {
      margin-top: 10px;
      font-size: 14px;
      width: 250px;
      height: 60px;
      display: flex;
      flex-wrap: wrap;
      color: #c7cafe;
      span {
        line-height: 30px;
      }
      .defeated {
        background: linear-gradient(to right, #787dfc, #c25e97, #7176fc);
      }
      div {
        width: 120px;
        display: flex;
        justify-content: space-around;
      }
    }
  }
  .projecttop1 {
    background: linear-gradient(to right bottom, #8387fe, #888dfd, #585efb);
  }
  .projecttop2 {
    background: linear-gradient(to right bottom, #b1b4ff, #b6b9ff, #9ca0ff);
  }
}
.bottoms {
  margin: 0 auto;
  width: 200px;
}
.top {
  background-color: #f3f4f5;
  height: 100%;
  .centers {
    margin: 0 40px;
    box-sizing: border-box;
    .centerbox {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      & > div {
        margin-right: 20px;
      }
      .centerboxtow {
        display: flex;
        flex-wrap: wrap;
        padding: 10px 10px 0 10px;
        box-sizing: border-box;
        height: 550px;
        overflow: hidden;
        & > div {
          margin-right: 20px;
        }
        .centerboxnoe {
          box-sizing: border-box;
          flex-shrink: 0;
          width: 340px;
          height: 191.25px;
          cursor: pointer;
          border-radius: 15px;
          border: 1px solid #fff;
          position: relative;
          background-color: #e1e2f5;
          box-shadow: 0px 0px 2px 3px #e1e2f5;
          .centerzhonjian {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -32px;
            margin-top: -23.5px;
            .reads {
              font-size: 20px;
              text-align: center;
              line-height: 20px;
              font-weight: 900;
              color: #434af9;
              border-radius: 50%;
              border: 3px solid #434af9;
              width: 20px;
              height: 20px;
              margin: 0 auto;
            }
            .readtext {
              text-align: center;
              color: #434af9;
            }
          }
        }
        .project {
          width: 340px;
          height: 191.25px;
          margin-bottom: 50px;
          .projectvideo {
            box-sizing: border-box;
            width: 340px;
            height: 191.25px;
            background-color: #fff;
            &:hover {
              border: 2px solid #409eff;
            }
          }
          .projectedit {
            width: 340px;
            height: 191.25px;
            background-color: #000;
            position: relative;
            .projecteditbox1 {
              border-radius: 0 0 0 30%;
              color: #fff;
              text-align: center;
              line-height: 30px;
              font-size: 14px;
              width: 60px;
              height: 30px;
              background-color: #007999;
              float: right;
            }
            .projecteditbox2 {
              position: absolute;
              left: 50%;
              top: 50%;
              margin-left: -30px;
              margin-top: -13px;
            }
          }
          .diandiandian {
            margin-top: 5px;
            text-align: left;
            .objtext {
              float: left;
            }
            .deldels {
              float: right;
            }
            .diandiandians {
              float: right;
              transform: rotate(90deg);
            }
            .projectname {
              color: #303133;
              font-size: 14px;
              font-weight: 600;
              text-align: left;
              display: inline-block;
              width: 200px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .times {
              color: #c8c8c9;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
.deltext {
  color: red;
}
.right {
  float: right;
  line-height: 60px;
  margin-right: 10px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.dialogform {
  width: 90%;
}
.el-icon-more {
  color: #409eff;
}
</style>